<template>
  <el-row type="flex" justify="space-between">
    <!-- <h1>艾三维技术管理后台</h1> -->
     <h1>建站管理后台</h1>
    <el-col :span="5">
      <div class="r-content">
        <!-- +创建新网站按钮 -->
        <div v-if="isWebsiteManage">
          <el-button @click="createNewWebsite"> +创建新网站 </el-button>
        </div>

        <!-- 消息弹出框 -->
        <span @click="drawer = true" class="el-dropdown-link">
          <i class="el-icon-common el-icon-bell"></i>
          <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
        </span>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <div class="informations">
            <p>清空已读</p>
            <div class="message-list">
              <el-row
                v-for="(message, index) in messages"
                :key="index"
                class="message-row"
              >
                <el-col :span="24">
                  <div class="message-card">
                    <el-avatar
                      class="message-avatar"
                      :icon="message.icon"
                    ></el-avatar>
                    <div class="message-content">
                      <span class="message-title">{{ message.title }}</span>
                      <p class="message-text">{{ message.text }}</p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-drawer>

        <!-- 人物选择器 -->
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <i class="el-icon-common el-icon-user"></i>
            <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="color: #000" disabled>
              <div class="messages">
                <div class="message">
                  <p>ax28022460</p>
                  <p>管理员</p>
                </div>
                <div class="messageImg">
                  <img
                    src="https://cdn.jsdelivr.net/gh/hr1201/img@main/imgs/basketball.png"
                    alt="avatar"
                  />
                </div>
              </div>
            </el-dropdown-item>
            <el-dropdown-item @click.native="personalData"
              >个人资料</el-dropdown-item
            >
            <el-dropdown-item @click.native="MemberManage"
              >成员管理</el-dropdown-item
            >
            <el-dropdown-item @click.native="toTEAMCO"
              >前往TEAMCO</el-dropdown-item
            >
            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Cookie from "js-cookie";

export default {
  data() {
    return {
      drawer: false,
      isWebsiteManage: false,
      messages: [
        { icon: 'el-icon-message', title: '系统消息', text: '文案支持AI生成' },
        { icon: 'el-icon-success', title: '付费成功', text: '您已开通超级VIP功能，该功能...' },
        // 更多消息...
      ]
    };
  },
  created() {
    this.checkCurrentRoute();
    this.$watch("$route", (to, from) => {
      this.checkCurrentRoute();
    });
  },
  methods: {
    createNewWebsite() {
      this.$router.push("/Main/websiteManage/createNewWebsite");
    },
    checkCurrentRoute() {
      this.selectedItem =
        this.$route.path.split("/Main/")[1] || "websiteManage";
      this.isWebsiteManage = this.selectedItem === "websiteManage";
    },
    backHome(item) {
      // 当页面的路由与跳转的路由不一致才跳转
      // route表示在当前页面，this.$route.path即为当前页面路径
      if (
        this.$route.path != item.path &&
        !(this.$route.path === "/main/websiteManage" && item.path === "/")
      ) {
        this.$router.push("/main/websiteManage");
      }
    },
    logout() {
      // 清除cookie中的token
      Cookie.remove("token");
      // 跳转到登录页面
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-right: 20px;
}

.r-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #636776;
  margin-left: 30px;
  // 居中
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-common {
  font-size: 20px;
}
.el-icon-arrow-down {
  font-size: 12px;
  margin-left: 8px;
}

.informations {
  line-height: 30px;
  p {
    margin-right: 10px;
  }
}

.messages {
  display: flex;
  align-items: center;
  border-bottom: 1px solid black;
  .message {
    margin-right: 20px;
    line-height: 25px;
    p {
      margin: 0;
    }
  }
  .messageImg {
    img {
      width: 36px;
      height: 36px;
      border-radius: 100%;
    }
  }
}
</style>
<style scoped>
.message-list {
  width: 100%;
}
.message-row {
  margin-bottom: 10px;
}
.message-card {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message-avatar {
  margin-right: 10px;
}
.message-content {
  text-align: left;
  flex: 1;
}
.message-title {
  font-size: 16px;
  font-weight: bold;
}
.message-text {
  margin-top: 5px;
  font-size: 14px;
  color: #606266;
}
</style>
